<template>
  <div class="home-container">
    home page
    <div class="hc-list">
      <div
          v-for="(item,index) in list"
          :key="index"
          class="hc-l-item"
      >
        {{ item['wn_time'] }} - {{ item['wn_num'] }}
      </div>
    </div>
    <el-divider/>
    <el-button type="primary" plain @click="getList">http请求 - 通过server - get</el-button>
    <el-divider/>
    <el-button type="primary" plain @click="getList_post">http请求 - 通过server - post</el-button>
    <el-divider/>
    <el-button type="primary" plain @click="getList_v2">http请求 - 直接请求: $fetch</el-button>
    <el-divider/>
    <el-button type="primary" plain @click="getList_params">http请求 - 使用useFetch传递单数</el-button>
  </div>
</template>

<script lang="ts">

interface Authorization {
  Authorization: string;
}

// const runtimeConfig = useRuntimeConfig();
export default {
  data() {
    return {
      params: {
        name: '123'
      },
      doc: {
        'useFetch': {
          1: '如果您需要在组件或页面中获取数据并支持SSR, 使用useFetch',
          2: '该函数用于在组件实例创建时立即发起 HTTP 请求，并将结果绑定到当前组件的 fetchState 中。' +
              '如果需要在组件实例创建时就获取一些数据并立即显示，可以使用该函数。'
        },
        'useAsyncData': {
          1: '如果您需要处理复杂的异步操作并支持SSR, 使用useAsyncData',
          2: '该函数用于在组件实例创建时立即发起异步数据获取，并将结果绑定到当前组件的 asyncData 中。' +
              '如果需要在组件实例创建时立即获取一些数据并将其绑定到 asyncData 中，可以使用该函数。'
        },
        '$fetch': '如果您只需要发起简单的HTTP请求而不关心SSR或自动缓存, 使用$fetch'
      },
      list: []
    }
  },
  async useAsyncData() {
    console.log('_useAsyncData...')
  },
  // async fetch({ $fetch }) {
  async asyncData() {
    const { data } = await useFetch('/api/test', { body: { name: 'wangli' } })
    console.log('useAsyncData返回结果', JSON.parse(JSON.stringify(data.value)))
    return {
      list: data
    }
  },
  created() {
    console.log('_created')
  },
  mounted() {
    console.log('cur_env', process.env.NODE_ENV)
    // this.getList_post()
  },
  methods: {
    async getList() {
      const {data} = await useFetch('/api/test', {
        query: {
          name: 'wangli',
        },
        onRequest({request, options}) {
          // 设置请求头
          options.headers.append('Authorization', '122')
        },
        onResponseError({ request, response, options }) {
          // 处理响应错误
          console.log('onResponseError', response.statusText)
        }
      })
      console.log('返回结果', JSON.parse(JSON.stringify(data.value)))
    },
    async getList_post() {
      const {data} = await useFetch('/api/test', {
        body: {
          name: 'wangli',
        },
        method: 'post',
        onRequest({request, options}) {
          // 设置请求头
          options.headers.append('Authorization', '122')
        },
        onRequestError({ request, options, error }) {
          // 处理请求错误
          console.log('_request_error', error)
        },
        onResponse({ request, response, options }) {
          // 处理响应数据
          localStorage.setItem('token', response._data.token)
        },
        onResponseError({ request, response, options }) {
          // 处理响应错误
          console.log('onResponseError', options)
        }
      })
      console.log('返回结果', JSON.parse(JSON.stringify(data.value)))
      this.list = (JSON.parse(JSON.stringify(data.value)))['data']['wn']
    },
    getList_v2() {
      $fetch('http://lyw.cdbytech.top:3017/api/wnHistoryRecord', {
        body: {
          name: 'wangli',
        },
        method: 'post',
        onRequest({request, options}) {
          // 设置请求头
          options.headers.append('Authorization', '122')
        },
      }).then(res => {
        console.log('_res', res)
      }).catch(e => {
        console.log('_e', e)
      })
    },
    async getList_params() {
      const { data } = await useFetch('/api/hello/jxa')
      console.log('_str', data.value)
    }
  }
}
</script>

<style scoped lang="scss">
.home-container{
  .hc-list{
    margin-top: 10px;
  }
}
</style>
